@import 'mo/style/common';

#{$split} {
    flex: 1;
    height: 100%;
    position: relative;
    width: 100%;

    &__sash {
        height: 100%;
        pointer-events: none;
        position: absolute;
        width: 100%;

        &__item {
            height: 100%;
            pointer-events: initial;
            position: absolute;
            top: 0;
            touch-action: none;
            transition: background 0.1s;
            width: 100%;
            z-index: 35;

            &--hover {
                background: var(--sash-hoverBorder);
            }

            &--disabled {
                pointer-events: inherit;
            }

            &--vertical {
                cursor: col-resize;
            }

            &--horizontal {
                cursor: row-resize;
            }
        }
    }

    &__pane {
        height: 100%;
        overflow: hidden;
        position: relative;
        white-space: nowrap;
        width: 100%;

        &__item {
            height: 100%;
            position: absolute;
            white-space: normal;
            width: 100%;

            &:not(&--visible) {
                cursor: pointer;
                visibility: hidden;
                z-index: -1;
            }
        }
    }
}
